<template>
  <div>
		<el-space>
			<el-button type="success" @click="add">添加膳食</el-button>
		</el-space>
		<el-tabs v-if="tableData.length > 0" type="border-card">
			<el-tab-pane 
				v-for="item in mealapi.weeks"
				:key="item.value"
				:label="item.label">
				<WeekItem :update="update" :mealTypeVo="getWeekEntry(item.value)" :del="del" />
			</el-tab-pane>
		</el-tabs>
		<el-dialog
			v-model="editDialog.show"
			:title="editDialog.title"
			width="400px"
			:close-on-click-modal="false">
			<Edit v-model:show="editDialog.show" :urls="request_url" :id="editDialog.id" :getTable="getTable" v-if="editDialog.show" />
		</el-dialog>
  </div>
</template>
<script setup>
import mealapi from '@/api/mealapi'
import WeekItem from './components/weekItem'
import { get, post } from '@/axios'
import { reactive, ref } from 'vue'
import Edit from './edit'
import { ElMessageBox } from 'element-plus'
const modelUrl = '/meal'
const request_url = {
	list: modelUrl + '/list',
	del: modelUrl + '/delete',
	getById: modelUrl + '/getById',
	add: modelUrl + '/add',
	update: modelUrl + '/update'
}
const tableData = ref([])
const roomNo = ref('')
const editDialog =reactive({
	show: false,
	title: '',
	id: null
})
function getTable () {
	get(request_url.list, {}, content => {
		tableData.value = content
	})
}
function search () {
	params.pageNo = 1
	params.roomNo = roomNo.value
	getTable()
}
function add () {
	editDialog.id = null
	editDialog.title = '添加膳食'
	editDialog.show = true
}
function update(id) {
	editDialog.id = id
	editDialog.title = '修改膳食'
	editDialog.show = true
}
function del(id) {
	ElMessageBox.confirm('确定要删除该膳食吗？', '删除警告', {
		type: 'warning',
		confirmButtonText: '确定',
		cancelButtonText: '取消'
	}).then(() => {
	  post(request_url.del, { id }, content => {
			getTable()
		})
	}).catch(() => {})
}
function getWeekEntry (weekCode) {
	for (const i in tableData.value) {
		if (weekCode === tableData.value[i].weekCode) {
			return tableData.value[i].mealTypeVos
		}
	}
}
getTable()
</script>

<style scoped lang="scss">
.el-pagination, .el-tabs {
	margin-top: 10px;
}
 


</style>